<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-1">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <input v-model='message'>
    </div>
    <script>
        var app1 = new Vue({
            el: '#app-1',
            data: {
                message: 'Hello Vue!'
            },
            computed: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('');
                }
            }
        });
    </script>
</body>


</html>